import React, { Component } from "react";
import { connect } from "react-redux";
import Headcom from "../../components/header"
import "./index.css"

import { delOrderList, countOrderTotal, initOrderTotal } from "../../store/action/orderAction"
import {getDefaultAddress} from "../../api/user"
class Index extends Component {
    constructor(props){
        super(props);
        this.state = {
            remark:"",
            sendpay:[
                {id:0,msg:"物流快递"},
                {id:1,msg:"上门自提"}
            ],
            nowindex:0,
            isShow:false,
            addressinfo:{}
        }
    }
    componentWillUnmount() {
        this.props.delOrderList();
        this.props.initOrderTotal();
    }
    componentDidMount() {
        this.props.countOrderTotal();
        let {id} = JSON.parse(localStorage.getItem("userinfo"));
        
        getDefaultAddress(id).then(res=>{
            this.setState({
                addressinfo:res.data.data
            })
        })
    }

    checkSendPay(nowindex){
        this.setState({nowindex,isShow:false})
    }
    
    render() {
  
        let {active,address,city,user,tel} = this.state.addressinfo;
        let { list, total } = this.props;
        return (
            <div className="confirmorder">
                <Headcom title="确认订单" />
                
                <div className="addressinfo" onClick={()=>{this.props.history.push("/address")}}>
                    <span>{user}</span>
                    <div>
                        <p>{tel}</p>
                        <p>{city}{address}</p>
                    </div>
                    {active==="true"?<em>默认</em>:null}
                    <i></i>
                </div>
                
                <ul>
                    {list.map(item => {
                        return <li key={item.id}>
                            <img src={item.img} alt="" />
                            <div>
                                <p>{item.name}</p>
                                <p className="price">￥{parseFloat(item.price).toFixed(2)}</p>
                                <span>X {item.num}</span>
                            </div>
                        </li>
                    })}
                </ul>
                <p className="sendpay" onClick={()=>{this.setState({isShow:true})}}>
                    <span className="fl">配送方式</span>
                    <span className="fr">{this.state.sendpay[this.state.nowindex].msg}</span>
                </p>
                <p className="freight">
                    <span className="fl">运费</span>
                    <span className="fr">￥{total.toFixed(2)>500?0:10}</span>
                </p>
                <textarea placeholder="填写备注"
                         value={this.state.remark}
                         onChange={(ev)=>{this.setState({remark:ev.target.value})}}></textarea>
                <div className="bot">
                    <p>合计 <span>￥{total.toFixed(2)}</span></p>
                    <em>提交订单</em>
                </div>
                
                {this.state.isShow?<div className="sendMask">
                    <div>
                       {this.state.sendpay.map((item,index)=>{
                           return <p key={item.id} 
                                     className={index===this.state.nowindex?"active":""}
                                     onClick={this.checkSendPay.bind(this,index)} 
                                   >{item.msg}</p>
                       })} 
                    </div>
                </div>:null}
                
            </div>
        )
    }
}


const mapStateToProps = state => {
    return {
        list: state.orderReducer.list,
        total: state.orderReducer.total
    }
}

const mapDispatchToProps = dispatch => {
    return {
        delOrderList: function () {
            dispatch(delOrderList());
        },
        countOrderTotal: function () {
            dispatch(countOrderTotal())
        },
        initOrderTotal: function () {
            dispatch(initOrderTotal())
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Index)

